<template>
    <div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div id="editor">
                    <h1>你正在使用wangeditor富文本编辑器。</h1>
                    <p>如果要使用请阅读文档<a>http://www.wangeditor.com。</a>比较简单，如果功能简单可以选择，只有最基本的配置，功能大部分可以自己写</p>
                </div>
                <button id="btn1">获取html</button>
                <button id="btn2">获取text</button>
                <button id="btn3">getJSON</button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import E from 'wangeditor'
export default {
  data () {
    return {}
  },
  methods: {},
  mounted: function () {
    // 创建编辑器
    var editor = new E('#editor')
    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    editor.customConfig.showLinkImg = false // 隐藏网络图片tab
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.create()
    document.getElementById('btn1').addEventListener(
      'click',
      function () {
        // 读取 html
        alert(editor.txt.html())
      },
      false
    )

    document.getElementById('btn2').addEventListener(
      'click',
      function () {
        // 读取 text
        alert(editor.txt.text())
      },
      false
    )
    document.getElementById('btn3').addEventListener('click', function () {
      var json = editor.txt.getJSON() // 获取 JSON 格式的内容
      var jsonStr = JSON.stringify(json)
      console.log(json)
      console.log(jsonStr)
    })
  }
}
</script>
